<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>用户登录</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <script src="layui/layui.js" charset="utf-8"></script>
    <script>var $ = layui.jquery;</script>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>用户登录</legend>
</fieldset>
<div class="layui-input-block layui-form" id="modifyClass"
     lay-filter="updateClass" style="margin: 20px">
    <form class="layui-form layui-form-pane" action="">

        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-inline">
                <input type="text" name="phone" lay-verify="required|phone" placeholder="请输入手机号"
                       autocomplete="off" id="phoneInput"
                       class="layui-input">
            </div>
        </div>



        <div class="layui-form-item" style="margin-top: 80px">
            <div class="layui-form-item">
                <div class="layui-input-inline" style="width: 60px">
                    <input type="checkbox" name="agree" lay-filter="choiceMust"
                           lay-skin="primary" title="同意"
                           autocomplete="off" lay-verify="required">
                </div>
                <div class="layui-form-mid layui-word-aux">《协议条款》</div>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn" lay-submit="" lay-filter="regBtn">登录</button>
            </div>
        </div>
    </form>
</div>

<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , laydate = layui.laydate;

        //日期的方法渲染
        laydate.render({
            elem: '#test1'
        });

        var InterValObj; //timer变量，控制时间
        var count = 5; //间隔函数，1秒执行
        var curCount;//当前剩余秒数



        //监听提交
        form.on('submit(regBtn)', function (data) {
            //先判断是否勾选了同意
            if (data.field.agree == "on") {
                /*layer.alert(JSON.stringify(data.field), {
                    title: '最终的提交信息'
                })
                return false;*/
                $.ajax({
                    url: "/user"
                    , type: "post"
                    , headers: {"method": "login"}
                    , data: {
                        "phone": $("#phoneInput").val()
                    }
                    , dataType: "json"
                    , success: function (result) {
                        if (result.code == 0) {
                            // 跳转到登录页
                            layer.msg(result.msg, {icon: 6, offset: "auto", time: 3000});//提示框
                            window.localStorage.setItem("wzphone",$("input[name=phone]").val());
                            window.location.href="/userHome.html";
                        } else if (result.code == 1) {
                            //置空验证码输入框
                            $('#codeInput').val("");
                            layer.msg(result.msg, {icon: 5, offset: "auto", time: 1000});
                        }
                    }
                    ,error: function (){
                        $('#codeInput').val("");
                        layer.msg("发生未知错误", {icon: 5, offset: "auto", time: 1000});
                    }
                })
                return false;
            } else {
                layer.alert("请勾选同意《协议条款》！")
                return false;
            }
        });



        //timer处理函数
        function SetRemainTime(){
            if(curCount == 0){
                $('#btnSendCode').removeClass('layui-btn-disabled');
                $('#btnSendCode').text("重获验证码");
                window.clearInterval(InterValObj);// 停止计时器
                $('#btnSendCode').removeAttr("disabled");
            } else{
                curCount--;
                $('#btnSendCode').text(curCount + "秒后重获");
            }
        }

    });
</script>
</body>
</html>